<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="detail">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in detail.info.gallery" :key="item">
        <img :src="item" style="width: 100%" />
      </van-swipe-item>
    </van-swipe>
    <van-cell-group>
      <van-cell>
        <template #title>
          <div class="custom-title">
            <span class="retailPrice">￥{{ detail.info.retailPrice }}.00</span>
            <span class="counterPrice"
              >￥{{ detail.info.counterPrice }}.00</span
            >
          </div>
          <div class="cell-title">{{ detail.info.name }}</div>
          <div class="cell-brief">{{ detail.info.brief }}</div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell @click="onSpecShow" title="规格" value="请选择>" />
      <van-cell @click="onAttShow" title="属性" value=">" />
      <van-cell title="运费" value="满88免邮费" />
    </van-cell-group>
    <van-popup
      v-model:show="specShow"
      position="bottom"
      round
      :style="{ height: '70%' }"
    >
      <div class="spec-top">
        <img :src="detail.info.picUrl" class="spec-image" />
        <div class="spec-info">
          <div class="spec-price">￥{{ price }}</div>
          <div class="spec-tip">请选择</div>
        </div>
      </div>

      <!-- 规格选择 -->
      <div class="spec-content">
        <div
          class="spec-section"
          v-for="(item, index1) in detail.specificationList"
          :key="index1"
        >
          <div class="spec-title">{{ item.name }}</div>
          <div class="spec-options">
              <van-button
              v-for="(spec, index2) in item.valueList"
              :key="index2"
              :type="isSelected(spec.value) ? 'primary':''"
              plain
              hairline
              size="small"
              class="spec-option van-button--disabled"
              @click="addGoods(index1,spec.value)"
            >
              {{ spec.value }}
            </van-button>
          </div>
        </div>

        <!-- 购买数量 -->
        <div class="spec-section">
          <div class="spec-title">购买数量</div>
          <van-stepper v-model="quantity" class="quantity-stepper" />
        </div>
      </div>
      <van-action-bar>
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </van-popup>
    <van-popup
      v-model:show="attShow"
      closeable
      close-icon="close"
      position="bottom"
    >
      <div class="att-title">商品属性</div>
      <div class="att-content">
        <van-cell-group>
          <template v-if="detail.attribute.length > 0">
            <van-cell
              v-for="item in detail.attribute"
              :key="item.id"
              :title="item.attribute"
              ><div class="att-value">{{ item.value }}</div></van-cell
            >
          </template>
        </van-cell-group>
      </div>
    </van-popup>
    <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" @click="toCart" />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="onSpecShow"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="onSpecShow"
      />
    </van-action-bar>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetail, postAddCart } from "../api";

let attShow = ref(false); //属性浮层
let specShow = ref(false); //规格浮层
let route = useRoute();
let router = useRouter();
let goodsArr = ref([])
let detail = reactive({
  info: {},
  attribute: {},
  specificationList: [],
  productList: [],
});
let price = ref("");
let quantity = ref(1); // 购买数量
let maxNumber = ref("");

const addToCart = () => {
  // 加入购物车逻辑
  specShow.value = false;
};
onMounted(async () => {
  try {
    let {
      data: { info, attribute, specificationList, productList },
    } = await getDetail(route.params.id);
    detail.info = info;
    detail.attribute = attribute;
    detail.specificationList = specificationList;
    detail.productList = productList;
    maxNumber.value = detail.productList[0].number;
    console.log(maxNumber.value);
    price.value = detail.info.retailPrice;
  } catch (error) {
    console.log(error);
  }
});

const onClickLeft = () => router.push("/");
const onSpecShow = () => {
  specShow.value = true;
};
const onAttShow = () => {
  attShow.value = true;
};
const toCart = () => {
  router.push("/cart");
};


//加入购物车
const addCart = async () => {
  try {
    await postAddCart({
      goodsId: detail.productList[0].goodsId,
      number: quantity.value,
      productId: detail.productList[0].id,
    });
    showSuccessToast("加入购物车成功!");
    specShow.value = false;
  } catch (error) {
    showFailToast("加入购物车失败");
  }
};

//查看按钮是否被选中
const isSelected = (value) =>{
  if(goodsArr.value.indexOf(value)==-1) return false;
  return true
}

//查看按钮是否被禁用
const isDisabled = (index,value) => {
  // let arr = 
  // return true

}

// 把当前选择的规格或颜色加入数组
const addGoods = (index,value) => {
  if(goodsArr.value[index] != value){
  goodsArr.value[index] = value
  }else {
    goodsArr.value.splice(index,1)
  }
  console.log(goodsArr.value);
  
  
}
</script>

<style>
.detail {
  color: #323233;
  font-size: 14px;
  background-color: #f2f2f2;
  margin-bottom: 50px;
}
.cell-title {
  color: #323233;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
}
.cell-brief {
  line-height: 18px;
  margin: 5px 0;
  font-size: 12px;
  color: #999;
  overflow: hidden;
}
.retailPrice {
  font-size: 20px;
  color: #db3d3c;
  margin-right: 10px;
}
.counterPrice {
  color: #999;
  text-decoration: line-through;
  font-size: 12px;
}
van-cell-group {
  margin-bottom: 15px;
}
.att-title {
  padding: 15px 0 30px 0;
  text-align: center;
}
.att-content {
  min-height: 150px;
  max-height: 400px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 10px;
  line-height: 30px;
}
.att-value {
  color: #323233;
  text-align: left;
}

.spec-top {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.spec-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.spec-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec-price {
  font-size: 18px;
  color: #f44;
  margin-bottom: 5px;
}

.spec-tip {
  font-size: 12px;
  color: #999;
}

.spec-content {
  padding: 15px;
}

.spec-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.spec-title {
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.spec-option {
  margin-right: 10px;
  margin-bottom: 10px;
}

.quantity-stepper {
  margin-top: 10px;
}
</style>